<template>

  <div>

    <!--条件搜索区域-->
    <el-row>
      <el-col :span="24">
        <el-card header="用户列表">
          <el-form :inline="true">

            <el-form-item label="登录账号">
              <el-input
                  v-model="searchUser.email"
                  placeholder="登录签名"
                  clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="用户类型">
              <el-select v-model="searchUser.userType" placeholder="请选择">
                <el-option label="不限" value=""></el-option>
                <el-option label="普通用户" value="0"></el-option>
                <el-option label="内测用户" value="1"></el-option>
                <el-option label="PLUS1会员" value="2"></el-option>
                <el-option label="PLUS2会员" value="3"></el-option>
                <el-option label="PLUS3会员" value="4"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="用户状态">
              <el-select v-model="searchUser.ipStatus" placeholder="请选择">
                <el-option label="不限" value=""></el-option>
                <el-option label="正常" value="0"></el-option>
                <el-option label="封禁" value="1"></el-option>
                <el-option label="待审核" value="3"></el-option>
              </el-select>
            </el-form-item>


            <el-form-item>
              <el-button icon="el-icon-search" @click="getUserList">搜索</el-button>
              <el-button @click="handleSave()" icon="el-icon-circle-plus-outline">添加用户</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-card>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                prop="wid"
                width="85"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                prop="ip"
                width="130"
                label="登录IP" >
            </el-table-column>

            <el-table-column width="180"
                prop="email"
                label="账号" >
            </el-table-column>

            <el-table-column width="180"
                prop="userPassword"
                label="密码" >
            </el-table-column>

            <el-table-column
                prop="createTime"
                width="150"
                label="创建时间" sortable>
            </el-table-column>

            <el-table-column
                prop="userType"
                width="100"
                label="用户类型" sortable>
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.userType === 0">普通用户</el-tag>
                <el-tag type="warning" v-if="scope.row.userType === 1">内测用户</el-tag>
                <el-tag type="success" v-if="scope.row.userType >= 2">PLUS{{scope.row.userType-1}}会员</el-tag>
              </template>
            </el-table-column>


            <el-table-column
                prop="ipStatus"
                width="120"
                label="用户状态" sortable>
              <template slot-scope="scope">
                <el-tag type="warning" v-if="scope.row.ipStatus === 3">待审核</el-tag>
                <el-tag type="danger" v-if="scope.row.ipStatus === 1">禁用</el-tag>
                <el-tag v-if="scope.row.ipStatus === 0">正常</el-tag>
              </template>
            </el-table-column>


            <el-table-column width="100"
                prop="requestCount"
                label="用户额度" sortable>
            </el-table-column>

            <el-table-column
                width="100"
                prop="limitationCount"
                label="限制请求" sortable>
            </el-table-column>


            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                &nbsp;
<!--                <el-popconfirm-->
<!--                    :title="('确认删除当前用户吗?')"-->
<!--                    @confirm="handleDelete(scope.$index, scope.row)"-->
<!--                >-->
<!--                  <el-button-->
<!--                      icon="el-icon-delete"-->
<!--                      size="mini"-->
<!--                      type="danger"  slot="reference">删除</el-button>-->
<!--                </el-popconfirm>-->

              </template>
            </el-table-column>

          </el-table>

          <el-footer>
            <!--分页-->
            <el-row style="margin-top: 20px;text-align: center;">
              <el-pagination
                  class="el-pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-sizes="[5]"
                  :current-page="current"
                  :page-size="size"
                  :total="total">
              </el-pagination>
            </el-row>
          </el-footer>

        </el-card>
      </el-col>
    </el-row>




    <el-dialog
        :title="selectInfoText"
        :visible.sync="selectInfoState"
        width="500px"
    >
      {{currentTips}}<br/><br/>
      {{currentText}}
    </el-dialog>

    <el-dialog
        :modal="false"
        :title="saveAndUpdateTitle"
        :visible.sync="saveAndUpdateDialog"
        :before-close="handleClose"
        width="600px"
    >
      <el-form :model="userObj"  ref="ruleForm" label-width="80px">

        <input type="hidden" v-model="userObj.wid"></input>

        <el-form-item v-if="addAndUpdateState" label="账号" prop="email" :rules="[{ required: true, message: '账号不能为空',trigger: 'blur'}]">
          <el-input  placeholder="必填项" v-model="userObj.email"></el-input>
        </el-form-item>

        <el-form-item v-if="addAndUpdateState" label="密码" prop="userPassword" :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'}]">
          <el-input  placeholder="必填项" v-model="userObj.userPassword"></el-input>
        </el-form-item>


        <el-form-item label="用户类型" prop="userType" >
          <el-select v-model="userObj.userType" @change="userTypeChange" style="width: 100%;">
            <el-option label="普通用户" :value="0"></el-option>
            <el-option label="内测用户" :value="1"></el-option>
            <el-option label="PLUS1会员" :value="2"></el-option>
            <el-option label="PLUS2会员" :value="3"></el-option>
            <el-option label="PLUS3会员" :value="4"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item  label="请求额度" prop="requestCount" :rules="[{ required: true, message: '请求额度不能为空',trigger: 'blur'}]">
          <el-input type="number" :min="0" placeholder="必填项" v-model="userObj.requestCount"></el-input>
        </el-form-item>

        <el-form-item  label="赠送次数" prop="resettingCount" :rules="[{ required: true, message: '赠送次数不能为空',trigger: 'blur'}]">
          <el-input type="number" :min="0" placeholder="必填项" v-model="userObj.resettingCount"></el-input>
        </el-form-item>

        <el-form-item  label="限制访问" prop="limitationCount" :rules="[{ required: true, message: '每日限制访问不能为空',trigger: 'blur'}]">
          <el-input type="number" :min="0" placeholder="必填项" v-model="userObj.limitationCount"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button v-if="addAndUpdateState" @click="resetForm('ruleForm')">重置</el-button>
          <el-button v-if="!addAndUpdateState" @click="handleClose">取消</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "index",
  data(){
    return{
      searchUser:{
        email:'',
        userType:'',
        ipStatus:''
      },
      tableData:[],
      size:5,
      current:1,
      total:0,
      saveAndUpdateTitle:'',
      saveAndUpdateDialog:false,
      addAndUpdateState:false,
      userObj:{
        wid:'',
        email:'',
        userPassword:'',
        userType:0,
        survivalTime:'',
        requestCount:3,
        resettingCount:0,
        limitationCount:3
      },
      selectInfoState:false,
      selectInfoText:'',
      currentTips:'',
      currentText:'',
    }
  },
  created() {
    this.getUserList();
  },
  methods:{

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post("/admin/user/"+(this.addAndUpdateState?'save':'update'),this.userObj).then(res =>{
            this.$message({
              showClose:true,
              message:res.data.msg,
              type:'success',
              duration:3000
            })
            this.getUserList()
            this.saveAndUpdateDialog = false
          })
        } else {
          return false;
        }
      });
    },
    getUserList(){
      this.$http.get("/admin/user/list",{
        params:{
          current:this.current,
          size:this.size,
          email:this.searchUser.email,
          userType:this.searchUser.userType,
          ipStatus:this.searchUser.ipStatus
        }
      }).then(res =>{
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    handleClose(){
      this.saveAndUpdateDialog = false
      this.resetForm('ruleForm')
    },
    userTypeChange(e){
      console.log(e)
      console.log(this.userObj.userType)
        if (this.userObj.userType === 0){
           this.userObj.requestCount = 3
            this.userObj.resettingCount = 0
            this.userObj.limitationCount = 3
        }else if (this.userObj.userType === 1){
          this.userObj.requestCount = 0
          this.userObj.resettingCount = 0
          this.userObj.limitationCount = 0
        }else if (this.userObj.userType === 2){
          this.userObj.requestCount = 35
          this.userObj.resettingCount = 3
          this.userObj.limitationCount = 35
        }else if (this.userObj.userType === 3){
          this.userObj.requestCount = 65
          this.userObj.resettingCount = 7
          this.userObj.limitationCount = 65
        }else if (this.userObj.userType === 4){
          this.userObj.requestCount = 95
          this.userObj.resettingCount = 12
          this.userObj.limitationCount = 95
        }
    },
    handleSave(){
      this.userObj = {
        wid:'',
        email:'',
        userPassword:'',
        userType:0,
        survivalTime:'',
        ipStatus:1,
        requestCount:3,
        resettingCount:0,
        limitationCount:3
      }
      this.addAndUpdateState = true
      this.saveAndUpdateDialog = true
      this.saveAndUpdateTitle = '添加用户'
    },
    handleEdit(index, row){
      this.addAndUpdateState = false
      this.saveAndUpdateDialog = true
      this.saveAndUpdateTitle = '修改用户'
      this.$http.get("/admin/user/info/"+row.wid).then(res =>{
        this.userObj = res.data.data
      })
    },
    // handleDelete(index, row){
    //   this.$http.get("/admin/user/delete/"+row.wid).then(res =>{
    //     this.getUserList();
    //     this.$message.success(res.data.msg)
    //   })
    // },
    // 分页
    handleSizeChange(val) {
      this.size = val
      this.getUserList()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getUserList()
    },
  }
}
</script>

<style scoped>

</style>
